<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
<!--     <script type="text/javascript" src="../Js/jquery.sorted.js"></script> -->
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
<script>
    $(function () {
    	start();
    	//点击新增按钮角色
		$('#addnew').click(function(){
				window.location.href="role_add.jsp";
		 });
    });
	function del(state_){
		if(confirm("确定要修改吗？")){
			$("#oper").val("changeState");
			$("input[name='roleState']").val(state_);
			$.ajax({
				url:'<%=basePath%>RoleServlet',
				data:$("#actionForm").serialize(),
				type:"post",
				dataType:"json",
				success:function(data){
					if(data.message!=null&&data.message>0){
						alert("修改成功");
						$("#oper").val("");
						start();
					}else{
						alert("修改失败");
					}
					
				}
			});
		}
	}
	function edit(roleId){
		//role_edit.jsp
		$("#roleId").val(roleId);
		$("#actionForm").attr("action","role_edit.jsp");
		$("#actionForm").submit();
	}
	//页面启动加载
	function start(){
		$.ajax({
			url:'<%=basePath%>RoleServlet',
			data:$("#actionForm").serialize(),
			type:"post",
			dataType:"json",
			success:function(data){
				var tableModel_=$("#tableModel").html();
				var html=[];
				if(data.list.length>0){
					var state1="正常";
					var state0="禁用";
					var change1="激活";
					var change0="禁用";
					$.each(data.list,function(i,ele){
						var hr_=tableModel_.replace(/{roleName}/g,ele.roleName);
						hr_=hr_.replace(/{roleState}/g,ele.roleState==1?state1:state0);
						hr_=hr_.replace(/{state_op}/g,ele.roleState==1?change0:change1);
						hr_=hr_.replace(/{changeState}/g,ele.roleState==1?0:1);
						hr_=hr_.replace(/{roleId}/g,ele.roleId);
						html.push(hr_);
					});
					$("#tbody").html(html.join(""));;
				}
			}
		});
	}
	function info(roleId){
		$("#roleId").val(roleId);
		//2为info
		$("#oper").val(2);
		$("#actionForm").attr("action","role_edit.jsp");
		$("#actionForm").submit();
	}
	function infoByName(){
		$("#oper").val("infoByName");
		start();
	}
</script>
    <style type="text/css"> body { padding-bottom: 40px;}.sidebar-nav {padding: 9px 0;}@media (max-width: 980px) {
            /* Enable use of floated navbar text */.navbar-text.pull-right { float: none;padding-left: 5px; padding-right: 5px; }}
    </style>
</head>
<body>
<form class="form-inline definewidth m20" id="actionForm" action="RoleServlet" method="post">  
 	<input type="hidden" id="oper" name="oper" value=""/> 
 	<input type="hidden" id="roleId" name="roleId" value=""/> 
 	<input type="hidden"  name="roleState" value=""/> 
    角色名称：
    <input type="text" name="roleName" id="roleName"class="abc input-default">&nbsp;&nbsp;  
    <button type="button" class="btn btn-primary" onclick="infoByName()">查询</button>&nbsp;&nbsp; 
    <button type="button" class="btn btn-success" id="addnew">新增角色</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
        <th>角色名称</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody"> <tr></tbody>
</table>
<div hidden >
<table >
<tbody id="tableModel">
	     <tr>
	           <td><a href="javascript:info({roleId})">{roleName}</a></td>
	           <td>{roleState}
	                 <!--如果状态为1？启用：禁用 -->
	                 <a href="javascript:del({changeState})">{state_op}</a>
	           </td>
	           <td><a href="javascript:edit({roleId})">编辑</a></td>
	     </tr>
</tbody>
</table>
</div>
</body>
</html>